<template>
	<view class="container">
		<sub-navigationbar text="优惠券获取记录" btnText=""></sub-navigationbar>
		<view class="coupon">
			<view class="coupon-head">
				<view class="tag">{{pageData.discountType}}券</view>
				<view class="price-group">
					<text class="unit" v-if="pageData.discountType!=='折扣'">¥</text>
					<text class="num">{{pageData.discountNumber}}</text>
					<text class="discount" v-if="pageData.discountType=='折扣'">折</text>
				</view>
				<view class="status">({{pageData.state}})</view>
			</view>
			<image class="coupon-line" src="../../static/coupon_line.png"></image>
			<view class="coupon-body">
				<view class="line-group">
					<text class="label">优惠券类别</text>
					<text class="detail">{{pageData.couponType}}券</text>
				</view>
				<view class="line-group">
					<text class="label">优惠方式</text>
					<text class="detail">{{pageData.discountType}}</text>
				</view>
				<view class="line-group">
					<text class="label">获取时间</text>
					<text class="detail">{{pageData.startTime | dateFormat}}</text>
				</view>
				<view class="line-group">
					<text class="label">有效期至</text>
					<text class="detail">{{pageData.endTime | dateFormat}}</text>
				</view>
				<view class="line-group">
					<text class="label">获取方式</text>
					<text class="detail">{{pageData.gainType}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import subNavigationbar from '@/components/sub-navigationbar.vue';
	export default {
		components: {
			subNavigationbar,
			pageData:[]
		},
		filters:{
			dateFormat(v) {
				return v.split('T')[0].replace(/-/g,".");
			},
			limitFormat(v,len) {
				if(!len) len = 10;
				return v.substring(0,len);
			}
		},
		onLoad(e) {
			this.pageData = JSON.parse(e.data);
			console.log(this.pageData)
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.coupon {
	width: 680rpx;
	margin:78rpx 0 0 38rpx;
	border-radius: 8rpx;
	background-color: $xy-color-default;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	&::before,
	&::after {
		content: '';
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
		position: absolute;
		top: 224rpx;
	}
	&::before {
		left: -13rpx;
	}
	&::after {
		right: -13rpx;
	}
	.coupon-head {
		height: 234rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		color: #FFFFFF;
		padding-top: 20rpx;
		box-sizing: border-box;
		line-height: 1;
		.tag {
			position: absolute;
			left: 16rpx;
			top: -28rpx;
			padding: 0 28rpx;
			height: 56rpx;
			background-color: $xy-color-primary;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: $xy-color-default;
			border-radius: 0 8rpx 0 8rpx;
		}
		.price-group{
			display: flex;
			align-items: center;
			justify-content: center;
			.unit,.discount {
				font-size: 80rpx;
				transform: translateY(6rpx);
			}
			.num {
				font-size: 124rpx;
			}
		}
		
		.status {
			position: absolute;
			bottom: 54rpx;
			right: 50rpx;
			font-size: 36rpx;
			line-height: 50rpx;
		}
	}
	.coupon-line {
		height: 6rpx;
		width: 632rpx;
	}
	.coupon-body {
		width: 100%;
		box-sizing: border-box;
		padding: 102rpx 52rpx 92rpx 46rpx;
		.line-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 56rpx;
			.label {
				font-size: 24rpx;
				color: $xy-color-primary;
			}
			.detail {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
}
</style>
